<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>添加</title>
		<link rel="stylesheet" href="layui/css/layui.css" />
	</head>
	<body>
		<div class="layui-container" style="margin-top: 10px;">
			<div class="layui-row">
				<div class="layui-col-md8 layui-col-md-offset2">
					<form class="layui-form layui-form-pane">
					  <div class="layui-form-item">
					    <label class="layui-form-label">图书名称</label>
					    <div class="layui-input-block">
					      <input type="text" name="bookName" autocomplete="off" placeholder="图书名称..." lay-verify="required" class="layui-input">
					    </div>
					  </div>
					  <div class="layui-form-item">
					    <label class="layui-form-label">图书作者</label>
					    <div class="layui-input-block">
					      <input type="text" name="authorName" autocomplete="off" placeholder="图书作者..." lay-verify="required" class="layui-input">
					    </div>
					  </div>
					  <div class="layui-form-item">
					    <label class="layui-form-label">图书价格</label>
					    <div class="layui-input-block">
					      <input type="text" name="price" autocomplete="off" placeholder="图书价格..." lay-verify="required" class="layui-input">
					    </div>
					  </div>
					  
					  <div class="layui-form-item">
					    <label class="layui-form-label">图书封面</label>
					    <div class="layui-input-block">
					      <div class="layui-upload-drag" style="display: block;" id="ID-upload-demo-drag">
					        <i class="layui-icon layui-icon-upload"></i> 
					        <div>点击上传，或将文件拖拽到此处</div>
					        <div class="layui-hide" id="ID-upload-demo-preview">
					          <hr> <img src="" alt="上传成功后渲染" style="max-width: 100%">
					        </div>
					      </div>
					    </div>
						<!-- 隐藏域 -->
						<input type="hidden" name="bookAddress" id="bookAddress"/>
						<input type="hidden" name="bookUrl" id="bookUrl"/>
					  </div>
					  
					  <div class="layui-form-item">
					    <label class="layui-form-label">图书分类</label>
					    <div class="layui-input-inline">
					      <select name="categoryId" id="categoryId"></select>
					    </div>
					  </div>
					  
					  <div class="layui-form-item" pane>
					    <label class="layui-form-label">是否上架</label>
					    <div class="layui-input-block">
					      <input type="radio" name="status" value="1" title="上架" checked>
					      <input type="radio" name="status" value="0" title="下架">
					    </div>
					  </div>
					  
					  <div class="layui-form-item" pane>
					    <label class="layui-form-label">创建时间</label>
					    <div class="layui-input-block">
					      <input type="text" class="layui-input" name="createTime" id="createTime" placeholder="yyyy/MM/dd HH:mm:ss">
					    </div>
					  </div>
					  
					  <div class="layui-form-item">
					    <button class="layui-btn" lay-submit lay-filter="add">添加图书</button>
					    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
					  </div>
					</form>
				</div>
			</div>
		</div>
		
		<script src="layui/layui.js"></script>
		<script>
			
			layui.use(function(){
				
				let laydate = layui.laydate;
				let $ = layui.$;
				let layer = layui.layer;
				let form = layui.form;
				let upload = layui.upload;
				
				//表单提交事件
				form.on("submit(add)",function(data){
					//获取表单提交的数据
					let field = data.field;
					
					//AJAX向后端发送请求
					$.ajax({
						type:"post",
						url:"http://127.0.0.1:8080/addBook",
						data:JSON.stringify(field),
						contentType: 'application/json',
						dataType:"json",
						success:function(d){
							console.log(d)
							if(d.code==0){
								//关闭弹出层
								let index = parent.layer.getFrameIndex(window.name); // 先得到当前 iframe 层的索引
								parent.layer.close(index); // 再执行关闭
							}else{
								//失败
								layer.msg(d.msg);
							}
						}
					});
					
					//阻止表单默认提交
					return false;
				});
				
				//图片上传
				upload.render({
				    elem: '#ID-upload-demo-drag',
				    url: 'http://127.0.0.1:8080/uploadFile', // 实际使用时改成您自己的上传接口即可。
				    done: function(res){
				      console.log(res);
					  
					  //将图片的服务器地址和本机的真实地址设置到对应的隐藏域中
					  $("#bookAddress").val(res.data.bookAddress);
					  $("#bookUrl").val(res.data.bookUrl);
					  
				      $('#ID-upload-demo-preview').removeClass('layui-hide')
				      .find('img').attr('src', "http://127.0.0.1:8080"+res.data.bookUrl);
				    }
				  });
				
				//获取图书分类信息
				$.getJSON("http://127.0.0.1:8080/getCategoryList",function(d){
					if(d.code==0){
						
						let list = d.data;
						let s='<option value=""></option>';
						for(let i=0;i<list.length;i++){
							s+='<option value="'+list[i].categoryId+'">'+list[i].categoryName+'</option>';
						}
						//将拼接好的字符串设置到分类的位置
						$("#categoryId").html(s);
						//重新渲染表单的下拉框
						form.render('select');
					}else{
						layer.msg(d.msg);
					}
				});
				
				//生成时间控件
				laydate.render({
				    elem: '#createTime',
				    type: 'datetime',
					value: new Date(),
					format:'yyyy/MM/dd HH:mm:ss'
				});
				
			});
			
		</script>
	</body>
</html>